<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>ref为引用数据类型obj：{{ obj }}</p>
    <button @click="obj.age++">修改obj内部age的值</button>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import {onBeforeMount, ref, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue";
// ts 类型限制
type scoreType = {
  ch: number[],
  math: number[]
}

interface ObjType {
  name: string,
  age: number,
  sex: string,
  hobby: string[],
  score: scoreType
}

const obj = ref<ObjType>({
  name: '李四',
  age: 12,
  sex: '男',
  hobby: ['唱', '跳', 'rap'],
  score: {
    ch: [1, 2, 3, 4],
    math: [2, 3, 4, 5]
  }
})

// setup函数 代替了 beforeCreate 和 created

onBeforeMount(() => {
  console.log('onBeforeMount')
});
onMounted(() => {
  console.log('onMounted')
});
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
});
onUpdated(() => {
  console.log('onUpdated')
});
onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
});
onUnmounted(() => {
  console.log('onUnmounted')
});
</script>
